<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {appointmentDetail} from "@/http/reservation/reservation";
import {ref} from "vue";
import router from "@/router";

const onClickLeft = () => history.back();

// 接收跳转传过来的参数
let baseUrl = 'http://192.168.5.120:8090'
const route = useRoute()
const id = route.query.id
// console.log(route.query.appointmentInfo)


// 预约详情请求
let detailInfo = ref({})
appointmentDetail(id).then(res => {
    console.log(res)
    if (res.code == 200) {
        detailInfo.value = res.data
    }
})


const cancel = useRouter()
// 跳转到取消预约
const goCancel=function (){
    cancel.push({
        path:"/canCellation",
        query:{id:detailInfo.value.id}
    })
}
</script>

<template>
    <div>
        <div>
            <van-nav-bar
                    left-text="预约详情"
                    left-arrow
                    @click-left="onClickLeft"
            />
            <div class="two">
                <div class="Teacher">
                    <div class="xlzu">心理咨询师</div>
                    <div class="buttom">
                        <div class="zheine">{{ detailInfo.psyTeacher?.name }}</div>
                        <div class="bujte">
                            <div class="Consultation">
                                <div class="ziune">{{ detailInfo.psyTeacher?.count }}人咨询过</div>
                                <div class="yumi">
                                    <img :src="baseUrl+detailInfo.psyTeacher?.avatar" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="time">
                    <div class="toew">
                        <div class="left">
                            <div class="timeone">
                                咨询时间
                            </div>
                            <div class="day">
                                <div class="tieme">{{
                                    detailInfo.psyScheduling
                                        ?.date
                                    }}
                                </div>
<!--                                <span>{{weeks[(index+weekDay)%7]}}</span>-->
                            </div>
                            <div class="timew">
                                <div class="quje">{{
                                    detailInfo.psyScheduling
                                        ?.startTime
                                    }}-{{
                                    detailInfo.psyScheduling
                                        ?.startTime
                                    }}
                                </div>
                                <span>({{ detailInfo.duration }}分钟)</span>
                            </div>
                        </div>
                        <div class="right">
                            <div class="ziye">
                                <van-icon name="friends"/>
                                <span>个人咨询</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Mode">
                    <div class="zxuen">
                        <div class="Modeone">咨询方式</div>
                        <div class="phone">电话咨询</div>
                    </div>
                    <div class="woonsa" style="background-color: #e8d3ff;color: #7246c5"
                         v-if="detailInfo.status==0">
                        待开始
                    </div>
                    <div class="woonsa" style="background-color: #58e043;color: #ffffff"
                         v-if="detailInfo.status==4">
                        进行中
                    </div>
                    <div class="woonsa" style="background-color: #077ac0;color: #ffffff"
                         v-if="detailInfo.status==2">
                        已结束
                    </div>
                    <div class="woonsa" style="background-color: #d9ad34;color: #ffffff"
                         v-if="detailInfo.status==3">
                        已取消
                    </div>
                </div>
                <div class="zixass">
                    <div class="phone">办公电话</div>
                    <div class="Address">{{ detailInfo.psyTeacher?.phone}}</div>
                </div>
                <div class="zixass">
                    <div class="phone">咨询地址</div>
                    <div class="Address">{{ detailInfo.psyTeacher?.location }}</div>
                </div>
            </div>
            <div class="three">
                <div class="Contentw">
                    <van-icon name="comment-o"/>
                    咨询内容
                </div>
                <div class="Frame">
                    {{ detailInfo.content }}
                </div>
            </div>
<!--            如果是已取消有取消原因-->
            <div class="three" v-if="detailInfo.status==3" style="margin-top: 10px">
                <div class="Contentw">
                    <van-icon name="comment-o"/>
                    取消理由
                </div>
                <div class="Frame">
                    {{ detailInfo.reason }}
                </div>
            </div>
<!--            如果是待开始有取消按钮-->
            <div class="cancel">
                <van-button type="primary"  v-if="detailInfo.status==0" id="one" color=" #9e75f5" @click="goCancel">取消预约</van-button>
            </div>
<!--        如果是已结束有老师建议和咨询反馈  -->
            <div class="three" v-if="detailInfo.status==2" style="margin-top: 10px">
                <div class="Contentw">
                    <van-icon name="comment-o"/>
                    老师建议
                </div>
                <div class="Frame">
                    {{ detailInfo.teacherSuggest }}
                </div>
            </div>
            <div class="three" v-if="detailInfo.status==2" style="margin-top: 10px">
                <div class="Contentw">
                    <van-icon name="comment-o"/>
                    咨询反馈
                </div>
                <div class="Frame">
                    {{ detailInfo.studentFeedback }}
                </div>
            </div>
        </div>

    </div>
</template>

<style scoped lang="less">
.two {
  width: 96%;
  margin: 10px auto;
  height: 320px;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;

  .Teacher {
    height: 55px;
    margin-bottom: 10px;
    border-bottom: 1px solid #F2F3F4;

    .xlzu {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.4);
    }

    .buttom {
      height: 10px;
      display: flex;
      justify-content: space-between;

      .zheine {
        margin-top: 5px;
        font-size: 18px;
      }

      .Consultation {
        width: 115px;
        display: flex;
        justify-content: space-between;

        .ziune {
          margin-top: 10px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
        }

        .yumi {
          width: 30px;
          height: 30px;
          border-radius: 15px;
          background-color: #9e75f5;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .time {
    height: 68px;

    .toew {
      display: flex;
      justify-content: space-between;

      .left {
        width: 54%;

        .timeone {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.4);
        }

        .day {
          width: 80%;
          display: flex;
          justify-content: space-between;

          .tieme {
            margin-top: 5px;
          }

          span {
            margin-top: -2px;
            font-size: 18px;
            font-weight: 700;
          }
        }

        .timew {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .quje {
            font-size: 18px;
            color: #101010;
            font-weight: 700;
            margin-top: 5px;
          }

          span {
            margin-top: 5px;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
          }
        }
      }

      .right {
        width: 30%;

        .ziye {
          margin-top: 25px;

          span {
            font-size: 14px;
            color: rgba(102, 102, 102, 1);
          }
        }


      }
    }


  }

  .Mode {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #F2F3F4;
    padding-top: 7px;
    padding-bottom: 7px;

    .zxuen {
      width: 30%;
      border-radius: 15px 0 0 15px;

      .Modeone {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.4);
        margin-bottom: 10px;
      }

      .phone {
        font-size: 18px;
        font-weight: 700;
      }
    }

    .woonsa {
      width: 25%;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 15px 0 0 15px;
      color: #D9BA12;
      font-size: 14px;
      margin-top: 16px;
      background-color: #E6E619;
      border-bottom: 1px solid #F2F3F4;
    }
  }

  .zixass {
    padding: 5px 0;
    height: 44px;
    border-top: 1px solid #F2F3F4;

    .phone {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.4);
    }

    .Address {
      font-size: 18px;
      font-weight: 700;
    }
  }
}

.three {
  width: 96%;
  margin: 0 auto;
  height: 120px;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;

  :deep(.van-icon) {
    margin-right: 10px;
  }

  .Frame {
    height: 75px;
    margin-top: 10px;
  }
}

.cancel {
  text-align: center;
  margin-top: 15px;

  #one {
    width: 60%;
  }
}
</style>